@charset "utf-8";

$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}
.search_wrap_big{
    position:absolute;
    top: 0;
    bottom: 0;
    width: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: all .3s linear;
    background: #f1f1f1;
    overflow: hidden;
    z-index: 205;
    .search_menu{
        height: r(100px);
        width: 100%;
        background: #222222;
        margin-bottom: r(31px);
    }
    .close_wrap{
        width: r(50px);
        height: r(50px);
        position: absolute;
        top: r(16px);
        left: r(20px);
        img{
            width: 100%;
        }
    }
    .search_wrap{
        position: relative;
        .search{
            width: r(535px);
            height: r(48px);
            border: r(1px) solid #fff;
            border-radius: r(50px);
            position: absolute;
            right: r(20px);
            top: r(24px);
            z-index: 1000;
            .iconfont{
                color: #fff;
                position: absolute;
                left: 1%;
                top: 20%;
            }
            input[id="searchname"]{
                position: absolute;
                left: 10%;
                top: 19%;
                border: none;
                background: none;
                width: 85%;
                color: #7e7e7e;
                text-align: left;
                line-height: r(28px);
            }
        }
    }
    .content{
        width: r(585px);
        margin: 0 auto;
        font-size: r(1px);
        .top_search{
            font-size: 14px;
            color: #706e6e;
            font-weight: bold;
        }
        .keyword_wrap{
            span{
                font-size: 15px;
                color: #8b8b8b;
                height: r(54px);
                line-height: r(74px);
                width: 100%;
                background: #fff;
                border: r(1px) solid #e1e1e1;
                padding: r(12px) r(16px);
            }
        }
    }
}

.search_wrap_big_open{
    opacity: 1;
    width: 100%;
    transform: translateX(0);
    transform-origin: right;
}
